<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- We get the name of the app out of the information fetched -->
    <title>{{app.name}}</title>
    <link href="static/screen.css" media="screen" rel="stylesheet" />
    <!-- These are Open Graph tags.  They add meta data to your  -->
    <!-- site that facebook uses when your content is shared     -->
    <!-- over facebook.  You should fill these tags in with      -->
    <!-- your data.  To learn more about Open Graph, visit       -->
    <!-- 'https://developers.facebook.com/docs/opengraph/'       -->
    <meta content="" property="og:title" />
    <meta content="" property="og:type" />
    <meta content="" property="og:url" />
    <meta content="" property="og:image" />
    <meta content="" property="og:site_name" />
    <meta content="{{appId}}" property="fb:app_id" />
    <script type="text/javascript">function popup(pageURL, title,w,h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); var targetWin = window.open( pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left ); }</script>
    <!--[if IE]>
      <script>
        var tags = ['header', 'section'];
        while(tags.length)
          document.createElement(tags.pop());
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="clearfix">
      <!-- By passing a valid access token here, we are able to display -->
      <!-- the user's images without having to download or prepare -->
      <!-- them ahead of time -->
      <p id="picture" style="background-image: url(https://graph.facebook.com/me/picture?type=normal&access_token={{token}})"></p>
      <div>
        <h1>Welcome, <strong>{{me.name}}</strong></h1>
        <p class="tagline">
          This is PerfectMatch app, an application designed to match people.
          <a href="{{app.link}}">{{app.name}}</a>
        </p>
        <div id="share-app">
          <ul>
            <li>
              <a class="facebook-button" href="#" onclick="popup('{{POST_TO_WALL}}', 'Post to Wall', 580, 400);">
                <span class="plus">Post to Wall</span>
              </a>
            </li>
            <li>
              <a class="facebook-button speech-bubble" href="#" onclick="popup('{{SEND_TO}}', 'Send', 580, 400);">
                <span class="speech-bubble">Send to Friends</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <section id="get-started">
      <p>Welcome to PerfectMatch app, the best place to match people. It's simple, and it's fast, just PerfectMatch. </p>
      <a class="button" href="http://devcenter.heroku.com/articles/facebook"> Rules </a>
	  <a class="button" href="http://devcenter.heroku.com/articles/facebook"> FAQ </a>
    </section>
    <section class="clearfix" id="samples">
      <h1>Examples of the Facebook Graph API</h1>
      <div class="list">
        <h3>A few of your friends</h3>
        <ul class="friends">{% for friend in friends.data %}
        <li>
          <a href="#" onclick="window.open('http://www.facebook.com/{{friend.id}}')">
            <img src="https://graph.facebook.com/{{friend.id}}/picture" alt="{{friend.name}}">
            {{friend.name}}
          </a>
        </li>{% endfor %}</ul>
      </div>
      <div class="list inline">
        <h3>Recent photos</h3>
        <ul class="photos">
          {% for photo in photos.data %}
            {% if loop.index0%4 == 0 %}
          <li class="first-column" style="background-image: url({{photo.picture}})">
            {% else %}
          <li style="background-image: url({{photo.picture}})">
            {% endif %}
            <a href="#" onclick="window.open('http://www.facebook.com/{{photo.id}}')">
              {{photo.name}}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="list">
        <h3>Things you like</h3>
        <ul class="things">{% for like in likes.data %}
        <li>
          <a href="#" onclick="window.open('http://www.facebook.com/{{like.id}}')">
            <img src="https://graph.facebook.com/{{like.id}}/picture?type=square" alt="{{like.name}}">
            {{like.name}}
          </a>
        </li>{% endfor %}</ul>
      </div>
      <div class="list">
        <h3>Friends using this app</h3>
        <ul class="friends">{% for friend in app_friends %}
        <li>
          <a href="#" onclick="window.open('http://www.facebook.com/{{friend.uid}}')">
            <img src="https://graph.facebook.com/{{friend.uid}}/picture?type=square" alt="{{friend.name}}">
            {{friend.name}}
            </a>
        </li>{% endfor %}</ul>
      </div>
    </section>
    <section class="clearfix" id="guides">
      <h1>Learn More About Heroku &amp; Facebook Apps</h1>
      <ul>
        <li>
          <a class="icon heroku" href="http://www.heroku.com/">Heroku</a>
          <p>Learn more about
          <a href="http://www.heroku.com/">Heroku</a>, or read developer docs in the Heroku
          <a href="http://devcenter.heroku.com/">Dev Center</a>.</p>
        </li>
        <li>
          <a class="icon websites" href="http://developers.facebook.com/docs/guides/web/">Websites</a>
          <p>Drive growth and engagement on your site with Facebook Login and Social Plugins.</p>
        </li>
        <li>
          <a class="icon mobile-apps" href="http://developers.facebook.com/docs/guides/mobile/">Mobile Apps</a>
          <p>Integrate with our core experience by building apps that operate within Facebook.</p>
        </li>
        <li>
          <a class="icon apps-on-facebook" href="http://developers.facebook.com/docs/guides/canvas/">Apps on Facebook</a>
          <p>Let users find and connect to their friends in mobile apps and games.</p>
        </li>
      </ul>
    </section>
  </body>
</html>
